import useGetData from "@hooks/useGetData"
import { Spin } from 'antd'
import { Link } from "react-router-dom";
export function NewsNav() {
  const [newsData, loading] = useGetData('/api/data/news');
  return (
    <>
      <Spin spinning={loading || !newsData}>

        <div className="grid grid-cols-3 gap-4 bg-white p-6 rounded-lg shadow-md outline-none">

          <div className="col-span-1  space-y-10">
            {
              newsData.slice(0, 3).map(item => (
                <div key={item.id} >
                  <Link to={`/news/${item.id}`} className='space-y-10'>
                    <div className="flex items-center">
                      <img
                        src="https://youtu-user-avatars.oss-cn-beijing.aliyuncs.com/manage_hq/upload/master/img/bb5b9be73e2fef43f017b0f9be04a4ff1693461310"
                        className="h-[6rem] rounded-lg mr-4 hidden xl:block"
                      />
                      <div className="space-y-2 truncate">
                        <p className="text-base truncate">{item.title}</p>
                        <p className="text-xs	text-gray-400 truncate">{item.summary}</p>
                        <p className="text-gray-400 pt-4">{item.docdate}</p>
                      </div>
                    </div>
                  </Link>
                </div>

              ))
            }
          </div>


          <div className="col-span-1 space-y-2">
            {
              newsData.slice(3, 15).map(item => (
                <div key={item.id}>
                  <div className="flex items-center justify-between">
                  <Link to={`/news/${item.id}`} className="truncate mr-3">
                      <p className="text-sm h-6 truncate">{item.title}</p>
                    </Link>
                    <p className="text-sm text-right text-gray-400 w-20 whitespace-nowrap hidden sm:block">{item.docdate}</p>
                  </div>
                </div>
              ))
            }
          </div>
          <div className="col-span-1 space-y-2">
            {
              newsData.slice(15).map(item => (
                <div key={item.id}>
                  <div className="flex items-center justify-between">
                    <Link to={`/news/${item.id}`} className="truncate mr-3">
                      <p className="text-sm h-6 truncate">{item.title}</p>
                    </Link>
                    <p className="text-sm text-right text-gray-400 w-20 whitespace-nowrap hidden sm:block">{item.docdate}</p>
                  </div>
                </div>
              ))
            }
          </div>
        </div >
      </Spin >

    </>
  )
}
